<template>
  <div class="callBarBox" ref="bottomCallBar" id="bottomCallBar" :class="barBoxClass" v-if="showCallBar">
    <div class="callBarBox__topBorder"></div>
    <div class="callBarBox__openIcon" @click="openBar"><i class="el-icon-phone el-icon"></i></div>
    <transition>
      <div class="callBarBox__body" v-show="isOpen">
        <call-index />
      </div>
    </transition>
  </div>
</template>
<script>
import CallIndex from "./index.vue"
import { mapGetters, mapState, mapActions } from "vuex"
import { inMobile } from "@/utils/common"
export default {
  name: 'CallBar',
  components: {
    CallIndex
  },
  props: [''],
  data() {
    return {
      openStatus: false, //呼叫条显示/隐藏控制
      showTimer: null,
      barStyle: {
        width: ""
      },
      inMobile: inMobile()
    };
  },
  computed: {
    ...mapState({
      sidebar: state => state.app.sidebar,
    }),
    ...mapState({
      permissions: state => state.user.permissions,
      isLogin: state => state.user.isLogin,
    }),
    ...mapGetters('call', ['isOpen']),
    barBoxClass() {
      return {
        "callBarBox--sidebarOpen": this.sidebar.opened,
        "callBarBox--inMobile": inMobile()
      }
    },
    //权限控制，只有管理员和CRM权限的人才有使用权限
    showCallBar() {
      return this.permissions.some((item) => {
        return /^[\*|crm]/gi.test(item);
      })
    },

  },
  watch: {
    $route() {
      this.openStatus = false;
    },
    sidebar: {
      handler() { },
      deep: true
    },
    //同步store的状态
    openStatus(val) {
      this.toggleOpen({ open: val });
    }
  },
  created() {
    let htmlClass = document.documentElement.className;
    if (inMobile()) {
      document.documentElement.className = htmlClass + " inMobile"
    }
  },
  mounted() {
    //this.startTimer()
    this.openStatus = this.isOpen
    this.changeBoxStyle();

    //监听其他空白地方关闭工具条
    document.addEventListener("mouseup", (e) => {
      let bar = document.querySelector("#bottomCallBar");
      if (bar) {
        if (!bar.contains(e.target)) {
          this.openStatus = false;
        }
      }
    })
  },
  methods: {
    ...mapActions('call', ['toggleOpen']),
    changeBoxStyle() {
      setTimeout(() => {
        this.barStyle.width = `${window.innerWidth - document.querySelector(".sidebar-container").clientWidth} + "px"`
      }, 1000)
    },
    //展开呼叫条
    openBar() {
      this.openStatus = !this.openStatus
      if (this.openStatus) {
        //this.startTimer()
      }
    },
    startTimer() {
      clearTimeout(this.showTimer)
      this.showTimer = setTimeout(() => {
        this.openStatus = false
        this.showTimer = null
      }, 10000)
    },
  },
  beforeDestroy() {
    clearTimeout(this.showTimer)
  }
}
</script>
<style lang='scss' scoped>
.callBarBox {
  position: fixed;
  z-index: 3333;
  bottom: 0;
  right: 0;
  width: calc(100% - 53px);

  //padding-left: 10px;
  &__bg {
    background: rgba(255, 255, 255, 0.1);
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100vh;
    z-index: 0;
  }

  &--sidebarOpen {
    width: calc(100% - 199px);
  }

  /*&--sidebarClose {
    width: calc(100% - 34px);
  }*/

  &__topBorder {
    height: 5px;
    width: 100%;
    background: #000;
  }

  &__openIcon {
    position: absolute;
    right: 10px;
    height: 50px;
    width: 50px;
    top: -45px;
    border: 1px solid #000;
    background: #000;
    text-align: center;
    border-radius: 5px 5px 0 0;
    z-index: 10;

    .el-icon {
      font-size: 35px;
      color: #fff;
      line-height: 45px;
    }
  }

  &__body {
    position: relative;
    z-index: 6;
  }

}

.inMobile {
  .callBarBox {
    width: 100%;
  }
}
</style>
